<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>产品详情</title>
    <meta name="keywords"  content="KEYWORDS..." />
    <meta name="description" content="DESCRIPTION..." />
    <meta name="author" content="DeathGhost" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <link rel="icon" href="/1/images/icon/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/1/images/icon/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/1/images/icon/apple-touch-icon-120x120-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="196x196" href="/1/images/icon/apple-touch-icon-196x196-precomposed.png">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/1/css/style.css" />
    <script src="/1/js/jquery.js"></script>
    <script src="/1/js/swiper.min.js"></script>
    <script src="/js/jquery.cookie.js"></script>
    <script src="/vendor/layer/layer.js"></script>
    <style>
        .pro_attr dd p {margin-bottom:.1rem;}
        .pro_attr img {max-width: 100%;}
        #slide .swiper-slide{height: auto}
        .pro_bigImg{padding:0}
    </style>
</head>
<body>
<!--header-->
<header>
 <a href="javascript:history.go(-1);" class="iconfont backIcon">&#60;</a>
 <h1>产品详情</h1>
 <a href="/home/order/cart" class="topCart"><em>0</em></a>
</header>
<div style="height:1rem;"></div>
{{--<div class="pro_bigImg">--}}
 {{--<img src="/1/upload/goods007.jpg"/>--}}
{{--</div>--}}
<div id="slide" class="pro_bigImg" style="height:auto;">
 <div class="swiper-wrapper">
  @foreach($goods['pic'] as $val)
   <div class="swiper-slide">
    <a>
     <img src="{{$val}}" style="height:auto;"/>
    </a>
   </div>
  @endforeach
 </div>
 <div class="pagination"></div>
</div>
<!--base information-->
<section class="pro_baseInfor">
 <h2>{{$goods['name']}}</h2>
 <p>
  <strong>{{$goods['price']}}</strong>
  <del>{{$goods['origin_price']}}</del>
 </p>
</section>
<!--product attr-->
<dl class="pro_attr">
 <dt>产品属性信息</dt>
 <dd style="padding-top:.2rem;padding-bottom:.3rem;">
     {!! $goods['detail'] !!}
 </dd>
</dl>
<!--bottom nav-->
<div style="height:1rem;"></div>
<aside class="btmNav">
 <a style="background:#64ab5b;color:white;text-shadow:none;" onclick="addCart('{{$goods['id']}}')">加入购物车</a>
 {{--<a style="background:#87a983;color:white;text-shadow:none;">加入常购单</a>--}}
</aside>
<script>
    var cartGoods = {};
    var storageKey = 'cart_goods';
    $(function () {
        new Swiper('#slide',{
            // autoplay:2500,
            visibilityFullFit : true,
            loop:true,
            pagination : '.pagination'
        });

        $('#slide .swiper-slide').height($('#slide .swiper-slide-active img').height() + 'px');

        cartGoods = $.cookie(storageKey) ? JSON.parse($.cookie(storageKey)) : {};

        // 购物车数量
        $('.topCart em').text(Object.keys(cartGoods).length);
    });

    // 加入购物车
    function addCart(goodsId) {
        if (cartGoods[goodsId]) {
            cartGoods[goodsId] = cartGoods[goodsId] + 1;
        } else {
            cartGoods[goodsId] = 1;
        }
        $('.topCart em').text(Object.keys(cartGoods).length);
        $.cookie(storageKey, JSON.stringify(cartGoods), {expires: 1, path: '/'});

        layer.msg('加入成功', {time: 2000});
        //location.href='/home/order/cart';
    }
</script>
</body>
</html>
